<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GiteeTree - Gitee目录树生成与卡片化分享</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .directory-tree { font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; line-height: 1.6; }
        .mac-card {
            background: linear-gradient(145deg, #2d3748, #1a202c);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }
        .mac-header {
            background: linear-gradient(145deg, #4a5568, #2d3748);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .mac-button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        .mac-content {
            padding: 24px;
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
        .mac-info {
            flex: 1;
            color: #e2e8f0;
        }
        .mac-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #f7fafc;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        .mac-desc {
            font-size: 0.875rem;
            color: #cbd5e0;
            margin-bottom: 16px;
        }
        .mac-stats {
            display: flex;
            gap: 16px;
            font-size: 0.875rem;
        }
    
        .gitee-card {
            background: #ffffff;
            border: 1px solid #d0d7de;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        .gitee-header {
            background: #f6f8fa;
            padding: 16px;
            border-bottom: 1px solid #d0d7de;
            display: flex;
            align-items: center;
            gap: 8px;
        }
       
        .gitee-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #0969da;
            display: flex;
            align-items: center;
        }
        .gitee-badge {
            background: #ddf4ff;
            color: #0969da;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-left: auto;
        }
        .gitee-content {
            padding: 16px;
            display: flex;
            gap: 20px;
        }
        .gitee-info {
            flex: 1;
        }
        .gitee-desc {
            color: #656d76;
            margin-bottom: 16px;
        }
        .gitee-stats {
            display: flex;
            gap: 16px;
            font-size: 0.875rem;
            color: #656d76;
        }
    
        .material-card {
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            overflow: hidden;
        }
        .material-content {
            padding: 24px;
        }
        .material-top {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            margin-bottom: 20px;
        }
        .material-info {
            flex: 1;
        }
        .material-title {
            font-size: 1.5rem;
            font-weight: 400;
            color: #202124;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        .material-desc {
            color: #5f6368;
            line-height: 1.5;
        }
        .material-divider {
            height: 1px;
            background: #e8eaed;
            margin: 20px 0;
        }
        .material-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #5f6368;
        }
        .material-stats-left {
            display: flex;
            gap: 20px;
        }
    
        .modern-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 16px;
            color: white;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }
        .modern-content {
            padding: 28px;
        }
        .modern-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        .modern-desc {
            opacity: 0.9;
            margin-bottom: 24px;
            line-height: 1.5;
        }
        .modern-footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        .modern-stats {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .modern-stat {
            opacity: 0.9;
            font-size: 0.9rem;
        }
    
        .qr-container {
            background: white;
            padding: 8px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .mac-tree-container {
            background: linear-gradient(145deg, #2d3748, #1a202c);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
            width: 900px;
            color: #e2e8f0;
        }
        .mac-tree-header {
            background: linear-gradient(145deg, #4a5568, #2d3748);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .mac-tree-content {
            padding: 20px;
            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
            line-height: 1.6;
            white-space: pre;
            overflow: visible;
            font-size: 14px;
        }
    
        /* 暗黑模式 */
        .dark-mode {
            background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
            color: #e2e8f0;
        }
        
        .dark-mode .glass-card {
            background: rgba(45, 55, 72, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .input-field {
            background: rgba(45, 55, 72, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #e2e8f0;
        }
        
        .dark-mode .input-field:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
        }
        
        .dark-mode .btn-secondary {
            background: rgba(45, 55, 72, 0.9);
            color: #e2e8f0;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .btn-secondary:hover {
            background: rgba(45, 55, 72, 1);
        }
        
        .dark-mode .advanced-options {
            background-color: rgba(45, 55, 72, 0.8);
        }
        
        .dark-mode .advanced-options-title {
            color: #cbd5e0;
        }
        
        .dark-mode .option-label {
            color: #cbd5e0;
        }
        
        .dark-mode .section-title {
            color: #e2e8f0;
        }
        
        .dark-mode .result-container {
            background: rgba(45, 55, 72, 0.9);
        }
        
        .dark-mode .directory-tree-container {
            background: rgba(26, 32, 44, 0.8);
            color: #e2e8f0;
        }
        
        .dark-mode .logo-text {
            background: linear-gradient(135deg, #90cdf4 0%, #a78bfa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .dark-mode .footer {
            color: #a0aec0;
        }
        
        .dark-mode .bg-blue-50 {
            background-color: rgba(66, 153, 225, 0.1);
        }
        
        .dark-mode .border-blue-200 {
            border-color: rgba(66, 153, 225, 0.2);
        }
        
        .dark-mode .text-blue-700 {
            color: #90cdf4;
        }
        
        .dark-mode .text-blue-800 {
            color: #63b3ed;
        }
        
        .dark-mode .bg-red-50 {
            background-color: rgba(245, 101, 101, 0.1);
        }
        
        .dark-mode .border-red-200 {
            border-color: rgba(245, 101, 101, 0.2);
        }
        
        .dark-mode .text-red-600 {
            color: #fc8181;
        }
        
        .dark-mode .text-red-800 {
            color: #f56565;
        }
        
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 120px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 8px;
            overflow: hidden;
        }
        .dropdown-content a {
            color: #333;
            padding: 8px 12px;
            text-decoration: none;
            display: block;
        }
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .advanced-options {
            background-color: #f9fafb;
            border-radius: 12px;
            padding: 16px;
            margin-top: 16px;
        }
        .advanced-options-title {
            font-weight: 600;
            margin-bottom: 12px;
            color: #4b5563;
            display: flex;
            align-items: center;
        }
        .advanced-options-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }
        .option-group {
            display: flex;
            flex-direction: column;
        }
        .option-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: #4b5563;
            margin-bottom: 6px;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
            min-height: 100vh;
            transition: background 0.3s ease;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }
        
        .glass-card:hover {
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.9);
            color: #4b5563;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 0.5rem 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 1);
            transform: translateY(-1px);
        }
        
        .input-field {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .input-field:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1a202c;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }
        
        .result-container {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }
        
        .directory-tree-container {
            background: rgba(249, 250, 251, 0.8);
            border-radius: 8px;
            padding: 1rem;
            max-height: 400px;
            overflow-y: auto;
            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
            line-height: 1.6;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .logo-text {
            font-size: 1.75rem;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .theme-toggle {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .theme-toggle:hover {
            background: rgba(255, 255, 255, 1);
            transform: scale(1.05);
        }
        
        .footer {
            text-align: center;
            margin-top: 3rem;
            color: #6b7280;
            font-size: 0.875rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .footer-link {
            color: #6b7280;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-link:hover {
            color: #667eea;
        }
        
        .loader-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        
        .loader {
            width: 40px;
            height: 40px;
            position: relative;
        }
        
        .loader-circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #667eea;
            animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
        }
        
        .loader-circle:nth-child(2) {
            width: 80%;
            height: 80%;
            top: 10%;
            left: 10%;
            border-top-color: #764ba2;
            animation-delay: 0.2s;
        }
        
        .loader-circle:nth-child(3) {
            width: 60%;
            height: 60%;
            top: 20%;
            left: 20%;
            border-top-color: #9f7aea;
            animation-delay: 0.4s;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loader-text {
            margin-top: 1rem;
            color: #6b7280;
            font-size: 0.875rem;
        }
        
        .loader-dots {
            display: inline-flex;
            gap: 4px;
        }
        
        .loader-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #667eea;
            animation: bounce 1.4s infinite ease-in-out both;
        }
        
        .loader-dot:nth-child(1) { animation-delay: -0.32s; }
        .loader-dot:nth-child(2) { animation-delay: -0.16s; }
        
        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }
        
        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 2rem;
            border-radius: 16px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
        }
        
        .dark-mode .modal-content {
            background-color: #2d3748;
            color: #e2e8f0;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1a202c;
        }
        
        .dark-mode .modal-title {
            color: #e2e8f0;
        }
        
        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
        }
        
        .close:hover {
            color: #667eea;
        }
        
        .modal-body {
            line-height: 1.6;
        }
        
        .modal-body h3 {
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            font-size: 1.25rem;
            font-weight: 600;
            color: #1a202c;
        }
        
        .dark-mode .modal-body h3 {
            color: #e2e8f0;
        }
        
        .modal-body p {
            margin-bottom: 1rem;
        }
        
        .modal-body ul {
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .modal-body li {
            margin-bottom: 0.5rem;
        }
        
        .modal-body code {
            background-color: #f1f5f9;
            padding: 0.125rem 0.25rem;
            border-radius: 4px;
            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
            font-size: 0.875rem;
        }
        
        .dark-mode .modal-body code {
            background-color: #4a5568;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            .header {
                flex-direction: column;
                gap: 1rem;
                align-items: flex-start;
            }
            
            .advanced-options-content {
                grid-template-columns: 1fr;
            }
            
            .modal-content {
                margin: 10% auto;
                padding: 1.5rem;
                width: 95%;
            }
            
            .footer-links {
                flex-direction: column;
                gap: 0.5rem;
            }
        }
        
        .gitee-small-icon {
            width: 28px;
            height: 28px;
            margin-right: 10px;
            fill: #c71d23;
            display: inline-block;
            vertical-align: middle;
        }
        
        .dark-mode .gitee-small-icon {
            fill: #fc8181;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="logo">
                <svg t="1754809639705" class="w-10 h-10 text-red-600" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9454">
                    <path d="M512 1024C229.2224 1024 0 794.7776 0 512S229.2224 0 512 0s512 229.2224 512 512-229.2224 512-512 512z m259.1488-568.8832H480.4096a25.2928 25.2928 0 0 0-25.2928 25.2928l-0.0256 63.2064c0 13.952 11.3152 25.2928 25.2672 25.2928h177.024c13.9776 0 25.2928 11.3152 25.2928 25.2672v12.6464a75.8528 75.8528 0 0 1-75.8528 75.8528H366.592a25.2928 25.2928 0 0 1-25.2672-25.2928v-240.1792a75.8528 75.8528 0 0 1 75.8272-75.8528h353.9456a25.2928 25.2928 0 0 0 25.2672-25.2928l0.0768-63.2064a25.2928 25.2928 0 0 0-25.2672-25.2928H417.152a189.6192 189.6192 0 0 0-189.6192 189.6448v353.9456c0 13.9776 11.3152 25.2928 25.2928 25.2928h372.9408a170.6496 170.6496 0 0 0 170.6496-170.6496v-145.408a25.2928 25.2928 0 0 0-25.2928-25.2672z" fill="currentColor" p-id="9455"></path>
                </svg>
                <h1 class="logo-text">GiteeTree</h1>
            </div>
            <button id="themeToggle" class="theme-toggle">
                <i class="fas fa-moon text-gray-600"></i>
            </button>
        </header>
        
        <main>
            <section class="glass-card p-6 mb-6">
                <details>
                    <summary class="cursor-pointer flex justify-between items-center text-lg font-semibold text-gray-700 hover:text-gray-900 transition duration-200">
                        <span><i class="fas fa-key mr-2"></i>API 访问令牌设置</span>
                        <i class="fas fa-chevron-down transform transition-transform duration-200"></i>
                    </summary>
                    <div class="mt-4 space-y-4 pt-4 border-t border-gray-100">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Gitee 个人访问令牌</label>
                            <div class="flex space-x-2">
                                <input type="password" id="tokenInput" placeholder="输入你的 Gitee 个人访问令牌" class="flex-1 input-field">
                                <button id="saveTokenBtn" class="btn-secondary">保存</button>
                            </div>
                        </div>
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <p class="text-sm text-blue-700">
                                <i class="fas fa-info-circle mr-2"></i>
                                <strong>如何获取访问令牌：</strong><br>
                                请访问 <a href="https://gitee.com/profile/personal_access_tokens" target="_blank" class="font-semibold underline hover:text-blue-800">Gitee 个人访问令牌页面 <i class="fas fa-external-link-alt text-xs"></i></a> 生成新令牌，确保勾选 <code class="bg-blue-100 px-1 rounded">user_info</code> 和 <code class="bg-blue-100 px-1 rounded">projects</code> 权限。
                            </p>
                        </div>
                        <div id="tokenStatus" class="hidden">
                            <div class="flex items-center space-x-2 text-green-600">
                                <i class="fas fa-check-circle"></i>
                                <span class="text-sm">访问令牌已保存</span>
                            </div>
                        </div>
                    </div>
                </details>
            </section>
            
            <section class="glass-card p-6">
                <h2 class="section-title">
                    <i class="fas fa-tools mr-2"></i>项目地址
                </h2>
                <div class="space-y-4">
                    <input type="text" id="projectInput" placeholder="例如：gitee.com/owner/repo 或 owner/repo" class="w-full input-field">
                    
                    <div class="advanced-options">
                        <div class="advanced-options-title">
                            <i class="fas fa-cog mr-2"></i>高级选项
                        </div>
                        <div class="advanced-options-content">
                            <div class="option-group">
                                <label class="option-label">目录深度</label>
                                <select id="depthSelect" class="input-field">
                                    <option value="1">1层（仅根目录）</option>
                                    <option value="2">2层</option>
                                    <option value="3">3层</option>
                                    <option value="4">4层</option>
                                    <option value="5">5层</option>
                                    <option value="0">全部（无限制）</option>
                                </select>
                            </div>
                            <div class="option-group">
                                <label class="option-label">显示内容</label>
                                <select id="viewTypeSelect" class="input-field">
                                    <option value="all">完整视图（文件和文件夹）</option>
                                    <option value="folders">仅文件夹</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <button id="generateDirBtn" class="flex-1 btn-primary flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            <i class="fas fa-folder-tree"></i>
                            <span>生成目录树</span>
                        </button>
                        <button id="generateCardBtn" class="flex-1 btn-primary flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            <i class="fas fa-id-card"></i>
                            <span>生成分享卡片</span>
                        </button>
                    </div>
                </div>
                
                <div id="dirLoadingSection" class="hidden mt-6">
                    <div class="loader-container">
                        <div class="loader">
                            <div class="loader-circle"></div>
                            <div class="loader-circle"></div>
                            <div class="loader-circle"></div>
                        </div>
                        <div class="loader-text">
                            正在获取项目目录结构
                            <div class="loader-dots">
                                <div class="loader-dot"></div>
                                <div class="loader-dot"></div>
                                <div class="loader-dot"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="dirResultSection" class="hidden mt-6">
                    <div class="result-container">
                        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-4">
                            <h3 class="text-lg font-semibold text-gray-700">
                                <i class="fas fa-folder-tree mr-2"></i>项目目录树
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                <button id="copyTextBtn" class="btn-secondary">
                                    <i class="fas fa-copy mr-1"></i>复制文本
                                </button>
                                <button id="copyMarkdownBtn" class="btn-secondary">
                                    <i class="fas fa-code mr-1"></i>复制Markdown
                                </button>
                                <button id="downloadImageBtn" class="btn-secondary">
                                    <i class="fas fa-image mr-1"></i>导出图片
                                </button>
                                <div class="dropdown">
                                    <button id="downloadScriptBtn" class="btn-secondary">
                                        <i class="fas fa-file-code mr-1"></i>下载脚本 <i class="fas fa-caret-down ml-1"></i>
                                    </button>
                                    <div class="dropdown-content">
                                        <a id="downloadBatBtn" href="#">Windows (.bat)</a>
                                        <a id="downloadShBtn" href="#">Linux/Mac (.sh)</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="directoryTreeContainer" class="directory-tree-container"></div>
                    </div>
                </div>
                
                <div id="cardLoadingSection" class="hidden mt-6">
                    <div class="loader-container">
                        <div class="loader">
                            <div class="loader-circle"></div>
                            <div class="loader-circle"></div>
                            <div class="loader-circle"></div>
                        </div>
                        <div class="loader-text">
                            正在生成项目分享卡片
                            <div class="loader-dots">
                                <div class="loader-dot"></div>
                                <div class="loader-dot"></div>
                                <div class="loader-dot"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="cardResultSection" class="hidden mt-6">
                    <div class="result-container">
                        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-4">
                            <h3 class="text-lg font-semibold text-gray-700">
                                <i class="fas fa-id-card mr-2"></i>项目分享卡片
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">卡片风格</label>
                                    <select id="cardStyleSelect" class="input-field text-sm">
                                        <option value="mac">macOS 风格</option>
                                        <option value="gitee">Gitee 风格</option>
                                        <option value="material">Material 风格</option>
                                        <option value="modern">现代风格</option>
                                    </select>
                                </div>
                                <button id="downloadCardBtn" class="btn-secondary self-end">
                                    <i class="fas fa-download mr-1"></i>下载卡片
                                </button>
                            </div>
                        </div>
                        <div class="flex justify-center">
                            <div id="shareCardContainer" class="w-full max-w-md"></div>
                        </div>
                    </div>
                </div>
                
                <div id="errorSection" class="hidden mt-6 bg-red-50 border border-red-200 rounded-lg p-6">
                    <div class="flex items-center">
                        <i class="fas fa-exclamation-circle text-red-600 text-xl mr-3"></i>
                        <div>
                            <h3 class="text-lg font-semibold text-red-800">获取失败</h3>
                            <p class="text-red-600 mt-1" id="errorMessage"></p>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        
         <footer class="footer">
            <div class="footer-links">
                <a href="https://gitee.com/azad-sl/GiteeTree" target="_blank" class="footer-link">
                    <i class="fab fa-git-alt mr-1"></i>Azad-sl/GiteeTree
                </a>
                <button id="helpBtn" class="footer-link">
                    <i class="fas fa-question-circle mr-1"></i>使用说明
                </button>
            </div>
            <p>
                <i class="fas fa-code mr-2"></i>
                使用 Gitee API 构建 | 
                <span class="text-gray-400">专业 · 优雅 · 高效</span>
            </p>
        </footer>
    </div>
    
    <!-- 使用说明 -->
    <div id="helpModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">使用说明</h2>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <h3>1. 获取 Gitee 访问令牌</h3>
                <p>首先，您需要获取 Gitee 的个人访问令牌（Personal Access Token）：</p>
                <ul>
                    <li>访问 <a href="https://gitee.com/profile/personal_access_tokens" target="_blank">Gitee 个人访问令牌页面</a></li>
                    <li>点击"生成新令牌"按钮</li>
                    <li>输入令牌描述，例如"GiteeTree"</li>
                    <li>勾选权限：<code>user_info</code> 和 <code>projects</code></li>
                    <li>点击"提交"按钮生成令牌</li>
                    <li>复制生成的令牌，粘贴到本页面的"API 访问令牌设置"中</li>
                </ul>
                
                <h3>2. 生成项目目录树</h3>
                <p>生成项目目录树的步骤：</p>
                <ul>
                    <li>在输入框中输入项目地址，格式为 <code>owner/repo</code> 或 <code>gitee.com/owner/repo</code></li>
                    <li>根据需要调整高级选项：
                        <ul>
                            <li><strong>目录深度</strong>：控制显示的目录层级深度</li>
                            <li><strong>显示内容</strong>：选择显示完整视图（文件和文件夹）或仅文件夹</li>
                        </ul>
                    </li>
                    <li>点击"生成目录树"按钮</li>
                    <li>等待加载完成，查看生成的目录树</li>
                    <li>使用顶部按钮进行复制文本、复制Markdown、导出图片或下载脚本</li>
                </ul>
                
                <h3>3. 生成项目分享卡片</h3>
                <p>生成项目分享卡片的步骤：</p>
                <ul>
                    <li>在输入框中输入项目地址</li>
                    <li>点击"生成分享卡片"按钮</li>
                    <li>等待加载完成，查看生成的卡片</li>
                    <li>选择卡片风格（macOS、Gitee、Material 或现代风格）</li>
                    <li>点击"下载卡片"按钮保存卡片图片</li>
                </ul>
                
                <h3>4. 导出目录树图片</h3>
                <p>导出的目录树图片采用 macOS 风格设计，包含项目名称和 Gitee 图标，适合分享和展示。</p>
                
                <h3>5. 下载目录结构脚本</h3>
                <p>您可以将项目目录结构导出为脚本文件，方便在其他环境中重建相同的目录结构：</p>
                <ul>
                    <li><strong>Windows (.bat)</strong>：适用于 Windows 命令提示符</li>
                    <li><strong>Linux/Mac (.sh)</strong>：适用于 Linux 和 macOS 终端</li>
                </ul>
                
                <h3>6. 暗黑模式</h3>
                <p>点击页面右上角的主题切换按钮，可以在亮色和暗黑模式之间切换，以适应不同的使用环境。</p>
            </div>
        </div>
    </div>
    
    <script>
        let savedToken = localStorage.getItem('gitee_token') || '';
        let isDarkMode = localStorage.getItem('dark_mode') === 'true';
        let selectedCardStyle = 'mac';
        let currentDirectoryTree = '';
        let currentProjectInfo = null;
        let currentDirectoryItems = [];
        let fullDirectoryTree = '';
        
        window.addEventListener('DOMContentLoaded', () => {
            if (savedToken) {
                document.getElementById('tokenInput').value = savedToken;
                document.getElementById('tokenStatus').classList.remove('hidden');
                document.getElementById('generateDirBtn').disabled = false;
                document.getElementById('generateCardBtn').disabled = false;
            }
            if (isDarkMode) {
                document.body.classList.add('dark-mode');
                document.getElementById('themeToggle').innerHTML = '<i class="fas fa-sun text-gray-300"></i>';
            }
        });
        
        document.getElementById('themeToggle').addEventListener('click', () => {
            isDarkMode = !isDarkMode;
            localStorage.setItem('dark_mode', isDarkMode);
            if (isDarkMode) {
                document.body.classList.add('dark-mode');
                document.getElementById('themeToggle').innerHTML = '<i class="fas fa-sun text-gray-300"></i>';
            } else {
                document.body.classList.remove('dark-mode');
                document.getElementById('themeToggle').innerHTML = '<i class="fas fa-moon text-gray-600"></i>';
            }
        });
        
        document.getElementById('saveTokenBtn').addEventListener('click', () => {
            const token = document.getElementById('tokenInput').value.trim();
            if (token) {
                savedToken = token;
                localStorage.setItem('gitee_token', token);
                document.getElementById('tokenStatus').classList.remove('hidden');
                document.getElementById('generateDirBtn').disabled = false;
                document.getElementById('generateCardBtn').disabled = false;
            }
        });
        
        function parseProjectPath(input) {
            input = input.replace(/^https?:\/\//, '');
            input = input.replace(/^gitee\.com\//, '');
            input = input.replace(/\/$/, '');
            const parts = input.split('/');
            if (parts.length !== 2) {
                throw new Error('请输入正确的项目路径，格式：owner/repo');
            }
            return { owner: parts[0], repo: parts[1] };
        }
        
        async function getProjectInfo(owner, repo) {
            if (!savedToken) {
                throw new Error('请先设置 Gitee 访问令牌');
            }
            const response = await fetch(`https://gitee.com/api/v5/repos/${owner}/${repo}`, {
                headers: {
                    'Authorization': `token ${savedToken}`,
                    'Accept': 'application/json'
                }
            });
            if (!response.ok) {
                if (response.status === 401) {
                    throw new Error('访问令牌无效或已过期，请重新设置');
                } else if (response.status === 403) {
                    throw new Error('访问令牌权限不足，请确保已勾选相应权限');
                } else if (response.status === 404) {
                    throw new Error('项目不存在或无权访问');
                }
                throw new Error(`获取项目信息失败 (${response.status})`);
            }
            return await response.json();
        }
        
        async function getProjectDirectoryRecursive(owner, repo, path = '', depth = 0, maxDepth = 0) {
            if (maxDepth > 0 && depth >= maxDepth) {
                return [];
            }
            
            const response = await fetch(`https://gitee.com/api/v5/repos/${owner}/${repo}/contents/${path}`, {
                headers: {
                    'Authorization': `token ${savedToken}`,
                    'Accept': 'application/json'
                }
            });
            
            if (!response.ok) {
                return [];
            }
            
            const items = await response.json();
            
            for (const item of items) {
                if (item.type === 'dir') {
                    item.children = await getProjectDirectoryRecursive(owner, repo, item.path, depth + 1, maxDepth);
                }
            }
            
            return items;
        }
        
        function generateDirectoryTreeText(items, prefix = '', viewType = 'all') {
            let text = '';
            items.forEach((item, index) => {
                if (viewType === 'folders' && item.type !== 'dir') {
                    return;
                }
                
                const isLast = index === items.length - 1;
                const connector = isLast ? '└── ' : '├── ';
                const icon = item.type === 'dir' ? '📁' : '📄';
                text += `${prefix}${connector}${icon} ${item.name}\n`;
                
                if (item.type === 'dir' && item.children && item.children.length > 0) {
                    const newPrefix = prefix + (isLast ? '    ' : '│   ');
                    text += generateDirectoryTreeText(item.children, newPrefix, viewType);
                }
            });
            return text;
        }
        
        function generateShareCard(projectInfo, style) {
            const cardDiv = document.createElement('div');
            
            const giteeIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            giteeIcon.setAttribute('viewBox', '0 0 1024 1024');
            giteeIcon.setAttribute('width', '16');
            giteeIcon.setAttribute('height', '16');
            giteeIcon.classList.add('gitee-small-icon');
            
            const giteePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            giteePath.setAttribute('d', 'M512 1024C229.2224 1024 0 794.7776 0 512S229.2224 0 512 0s512 229.2224 512 512-229.2224 512-512 512z m259.1488-568.8832H480.4096a25.2928 25.2928 0 0 0-25.2928 25.2928l-0.0256 63.2064c0 13.952 11.3152 25.2928 25.2672 25.2928h177.024c13.9776 0 25.2928 11.3152 25.2928 25.2672v12.6464a75.8528 75.8528 0 0 1-75.8528 75.8528H366.592a25.2928 25.2928 0 0 1-25.2672-25.2928v-240.1792a75.8528 75.8528 0 0 1 75.8272-75.8528h353.9456a25.2928 25.2928 0 0 0 25.2672-25.2928l0.0768-63.2064a25.2928 25.2928 0 0 0-25.2672-25.2928H417.152a189.6192 189.6192 0 0 0-189.6192 189.6448v353.9456c0 13.9776 11.3152 25.2928 25.2928 25.2928h372.9408a170.6496 170.6496 0 0 0 170.6496-170.6496v-145.408a25.2928 25.2928 0 0 0-25.2928-25.2672z');
            giteePath.setAttribute('fill', 'currentColor');
            giteePath.setAttribute('p-id', '9455');
            
            giteeIcon.appendChild(giteePath);
            
            switch(style) {
                case 'mac':
                    cardDiv.className = 'mac-card';
                    cardDiv.innerHTML = `
                        <div class="mac-header">
                            <div class="mac-button bg-red-500"></div>
                            <div class="mac-button bg-yellow-500"></div>
                            <div class="mac-button bg-green-500"></div>
                        </div>
                        <div class="mac-content">
                            <div class="mac-info">
                                <h3 class="mac-title"></h3>
                                <p class="mac-desc">${projectInfo.description || '暂无描述'}</p>
                                <div class="mac-stats">
                                    <span><i class="fas fa-star text-yellow-400 mr-1"></i>${projectInfo.stargazers_count || 0}</span>
                                    <span><i class="fas fa-code-branch text-green-400 mr-1"></i>${projectInfo.forks_count || 0}</span>
                                    <span><i class="fas fa-circle text-blue-400 mr-1 text-xs"></i>${projectInfo.language || '未知'}</span>
                                </div>
                            </div>
                            <div class="qr-container">
                                <div id="qrcode"></div>
                            </div>
                        </div>
                    `;
                    const macTitle = cardDiv.querySelector('.mac-title');
                    macTitle.appendChild(giteeIcon.cloneNode(true));
                    macTitle.appendChild(document.createTextNode(projectInfo.full_name));
                    break;
                
                case 'gitee':
                    cardDiv.className = 'gitee-card';
                    cardDiv.innerHTML = `
                        <div class="gitee-header">
                            
                            <h3 class="gitee-title"></h3>
                            <span class="gitee-badge">Public</span>
                        </div>
                        <div class="gitee-content">
                            <div class="gitee-info">
                                <p class="gitee-desc">${projectInfo.description || '暂无描述'}</p>
                                <div class="gitee-stats">
                                    <span><i class="fas fa-star mr-1"></i>${projectInfo.stargazers_count || 0}</span>
                                    <span><i class="fas fa-code-branch mr-1"></i>${projectInfo.forks_count || 0}</span>
                                    <span><i class="fas fa-circle mr-1 text-xs"></i>${projectInfo.language || '未知'}</span>
                                </div>
                            </div>
                            <div class="qr-container">
                                <div id="qrcode"></div>
                            </div>
                        </div>
                    `;
                    const giteeTitle = cardDiv.querySelector('.gitee-title');
                    giteeTitle.appendChild(giteeIcon.cloneNode(true));
                    giteeTitle.appendChild(document.createTextNode(projectInfo.full_name));
                    break;
                
                case 'material':
                    cardDiv.className = 'material-card';
                    cardDiv.innerHTML = `
                        <div class="material-content">
                            <div class="material-top">
                                <div class="material-info">
                                    <h3 class="material-title"></h3>
                                    <p class="material-desc">${projectInfo.description || '暂无描述'}</p>
                                </div>
                                <div class="qr-container">
                                    <div id="qrcode"></div>
                                </div>
                            </div>
                            <div class="material-divider"></div>
                            <div class="material-stats">
                                <div class="material-stats-left">
                                    <span><i class="fas fa-star mr-2"></i>${projectInfo.stargazers_count || 0}</span>
                                    <span><i class="fas fa-code-branch mr-2"></i>${projectInfo.forks_count || 0}</span>
                                </div>
                                <span><i class="fas fa-circle mr-2 text-xs"></i>${projectInfo.language || '未知'}</span>
                            </div>
                        </div>
                    `;
                    const materialTitle = cardDiv.querySelector('.material-title');
                    materialTitle.appendChild(giteeIcon.cloneNode(true));
                    materialTitle.appendChild(document.createTextNode(projectInfo.full_name));
                    break;
                
                case 'modern':
                    cardDiv.className = 'modern-card';
                    cardDiv.innerHTML = `
                        <div class="modern-content">
                            <div>
                                <h3 class="modern-title"></h3>
                                <p class="modern-desc">${projectInfo.description || '暂无描述'}</p>
                            </div>
                            <div class="modern-footer">
                                <div class="modern-stats">
                                    <div class="modern-stat"><i class="fas fa-star mr-2"></i>${projectInfo.stargazers_count || 0} Stars</div>
                                    <div class="modern-stat"><i class="fas fa-code-branch mr-2"></i>${projectInfo.forks_count || 0} Forks</div>
                                    <div class="modern-stat"><i class="fas fa-circle mr-2 text-xs"></i>${projectInfo.language || '未知'}</div>
                                </div>
                                <div class="qr-container">
                                    <div id="qrcode"></div>
                                </div>
                            </div>
                        </div>
                    `;
                    const modernTitle = cardDiv.querySelector('.modern-title');
                    modernTitle.appendChild(giteeIcon.cloneNode(true));
                    modernTitle.appendChild(document.createTextNode(projectInfo.full_name));
                    break;
            }
            
            setTimeout(() => {
                const qrcodeDiv = cardDiv.querySelector('#qrcode');
                if (qrcodeDiv) {
                    new QRCode(qrcodeDiv, {
                        text: projectInfo.html_url,
                        width: 96,
                        height: 96,
                        colorDark: "#000000",
                        colorLight: "#ffffff",
                        correctLevel: QRCode.CorrectLevel.H
                    });
                }
            }, 100);
            return cardDiv;
        }
        
        function showError(message) {
            document.getElementById('errorMessage').textContent = message;
            document.getElementById('dirLoadingSection').classList.add('hidden');
            document.getElementById('cardLoadingSection').classList.add('hidden');
            document.getElementById('dirResultSection').classList.add('hidden');
            document.getElementById('cardResultSection').classList.add('hidden');
            document.getElementById('errorSection').classList.remove('hidden');
        }
        
        function showButtonFeedback(button, text = '已复制！') {
            const originalContent = button.innerHTML;
            button.innerHTML = `<i class="fas fa-check mr-1"></i>${text}`;
            button.disabled = true;
        
            setTimeout(() => {
                button.innerHTML = originalContent;
                button.disabled = false;
            }, 1500);
        }
        
        document.getElementById('generateDirBtn').addEventListener('click', async () => {
            const input = document.getElementById('projectInput').value.trim();
            if (!input) {
                showError('请输入项目地址或路径');
                return;
            }
            
            const depth = parseInt(document.getElementById('depthSelect').value);
            const viewType = document.getElementById('viewTypeSelect').value;
            
            try {
                const { owner, repo } = parseProjectPath(input);
                document.getElementById('dirLoadingSection').classList.remove('hidden');
                document.getElementById('dirResultSection').classList.add('hidden');
                document.getElementById('errorSection').classList.add('hidden');
                
                const [projectInfo, directory] = await Promise.all([
                    getProjectInfo(owner, repo),
                    getProjectDirectoryRecursive(owner, repo, '', 0, depth)
                ]);
                
                currentProjectInfo = projectInfo;
                currentDirectoryItems = directory;
                
                fullDirectoryTree = `${projectInfo.name}\n${generateDirectoryTreeText(directory, '', 'all')}`;
                
                currentDirectoryTree = `${projectInfo.name}\n${generateDirectoryTreeText(directory, '', viewType)}`;
                document.getElementById('directoryTreeContainer').innerHTML = `<pre>${currentDirectoryTree}</pre>`;
                
                document.getElementById('dirLoadingSection').classList.add('hidden');
                document.getElementById('dirResultSection').classList.remove('hidden');
            } catch (error) {
                showError(error.message);
            }
        });
        
        document.getElementById('generateCardBtn').addEventListener('click', async () => {
            const input = document.getElementById('projectInput').value.trim();
            if (!input) {
                showError('请输入项目地址或路径');
                return;
            }
            try {
                const { owner, repo } = parseProjectPath(input);
                document.getElementById('cardLoadingSection').classList.remove('hidden');
                document.getElementById('cardResultSection').classList.add('hidden');
                document.getElementById('errorSection').classList.add('hidden');
                
                currentProjectInfo = await getProjectInfo(owner, repo);
                
                const container = document.getElementById('shareCardContainer');
                container.innerHTML = '';
                const card = generateShareCard(currentProjectInfo, selectedCardStyle);
                container.appendChild(card);
                
                document.getElementById('cardLoadingSection').classList.add('hidden');
                document.getElementById('cardResultSection').classList.remove('hidden');
            } catch (error) {
                showError(error.message);
            }
        });
        
        document.getElementById('copyTextBtn').addEventListener('click', () => {
            if (currentDirectoryTree) {
                navigator.clipboard.writeText(currentDirectoryTree);
                showButtonFeedback(document.getElementById('copyTextBtn'));
            }
        });
        
        document.getElementById('copyMarkdownBtn').addEventListener('click', () => {
            if (currentDirectoryTree) {
                const markdown = `\`\`\`\n${currentDirectoryTree}\`\`\``;
                navigator.clipboard.writeText(markdown);
                showButtonFeedback(document.getElementById('copyMarkdownBtn'));
            }
        });
        
        document.getElementById('downloadImageBtn').addEventListener('click', async () => {
            if (!fullDirectoryTree || !currentProjectInfo) return;
            
            const tempContainer = document.createElement('div');
            tempContainer.style.position = 'absolute';
            tempContainer.style.left = '-9999px';
            
            const macTreeContainer = document.createElement('div');
            macTreeContainer.className = 'mac-tree-container';
            
            const macHeader = document.createElement('div');
            macHeader.className = 'mac-tree-header';
            macHeader.innerHTML = `
                <div class="mac-button bg-red-500"></div>
                <div class="mac-button bg-yellow-500"></div>
                <div class="mac-button bg-green-500"></div>
                <div style="margin-left: 10px; display: flex; align-items: center;">
                    <svg t="1754809639705" class="w-5 h-5 text-red-600 mr-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9454">
                        <path d="M512 1024C229.2224 1024 0 794.7776 0 512S229.2224 0 512 0s512 229.2224 512 512-229.2224 512-512 512z m259.1488-568.8832H480.4096a25.2928 25.2928 0 0 0-25.2928 25.2928l-0.0256 63.2064c0 13.952 11.3152 25.2928 25.2672 25.2928h177.024c13.9776 0 25.2928 11.3152 25.2928 25.2672v12.6464a75.8528 75.8528 0 0 1-75.8528 75.8528H366.592a25.2928 25.2928 0 0 1-25.2672-25.2928v-240.1792a75.8528 75.8528 0 0 1 75.8272-75.8528h353.9456a25.2928 25.2928 0 0 0 25.2672-25.2928l0.0768-63.2064a25.2928 25.2928 0 0 0-25.2672-25.2928H417.152a189.6192 189.6192 0 0 0-189.6192 189.6448v353.9456c0 13.9776 11.3152 25.2928 25.2928 25.2928h372.9408a170.6496 170.6496 0 0 0 170.6496-170.6496v-145.408a25.2928 25.2928 0 0 0-25.2928-25.2672z" fill="currentColor" p-id="9455"></path>
                    </svg>
                    <span style="color: #f7fafc; font-weight: 600;">${currentProjectInfo.full_name}</span>
                </div>
            `;
            
            const macContent = document.createElement('div');
            macContent.className = 'mac-tree-content';
            macContent.textContent = fullDirectoryTree;
            
            macTreeContainer.appendChild(macHeader);
            macTreeContainer.appendChild(macContent);
            tempContainer.appendChild(macTreeContainer);
            document.body.appendChild(tempContainer);
            
            try {
                const contentHeight = macContent.scrollHeight;
                macTreeContainer.style.height = (contentHeight + 80) + 'px'; // 80px是头部高度
                
                const canvas = await html2canvas(macTreeContainer, {
                    backgroundColor: null,
                    scale: 2,
                    height: contentHeight + 80,
                    windowHeight: contentHeight + 80
                });
                
                const link = document.createElement('a');
                link.download = `${currentProjectInfo.full_name.replace('/', '-')}-directory.png`;
                link.href = canvas.toDataURL('image/png');
                link.click();
                
                showButtonFeedback(document.getElementById('downloadImageBtn'), '已下载！');
            } catch (error) {
                console.error('生成图片失败:', error);
            } finally {
                document.body.removeChild(tempContainer);
            }
        });
        
        // 下载为.bat脚本
        document.getElementById('downloadBatBtn').addEventListener('click', (e) => {
            e.preventDefault();
            if (!currentDirectoryItems || !currentProjectInfo) return;
            
            let scriptContent = `@echo off\necho Creating directory structure for ${currentProjectInfo.full_name}\necho.\n`;
            
            // 生成创建目录的命令
            function generateBatScript(items, path = '') {
                items.forEach(item => {
                    const itemPath = path ? `${path}\\${item.name}` : item.name;
                    if (item.type === 'dir') {
                        scriptContent += `mkdir "${itemPath}"\n`;
                        if (item.children && item.children.length > 0) {
                            generateBatScript(item.children, itemPath);
                        }
                    } else {
                        scriptContent += `echo. > "${itemPath}"\n`;
                    }
                });
            }
            
            generateBatScript(currentDirectoryItems);
            scriptContent += `\necho Directory structure created successfully!\npause`;
            
            // 下载脚本
            const blob = new Blob([scriptContent], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = `${currentProjectInfo.full_name.replace('/', '-')}-structure.bat`;
            link.href = url;
            link.click();
            URL.revokeObjectURL(url);
        });
        
        // 下载为.sh脚本
        document.getElementById('downloadShBtn').addEventListener('click', (e) => {
            e.preventDefault();
            if (!currentDirectoryItems || !currentProjectInfo) return;
            
            let scriptContent = `#!/bin/bash\necho "Creating directory structure for ${currentProjectInfo.full_name}"\necho\n`;
            
            function generateShScript(items, path = '') {
                items.forEach(item => {
                    const itemPath = path ? `${path}/${item.name}` : item.name;
                    if (item.type === 'dir') {
                        scriptContent += `mkdir -p "${itemPath}"\n`;
                        if (item.children && item.children.length > 0) {
                            generateShScript(item.children, itemPath);
                        }
                    } else {
                        scriptContent += `touch "${itemPath}"\n`;
                    }
                });
            }
            
            generateShScript(currentDirectoryItems);
            scriptContent += `\necho "Directory structure created successfully!"`;
            
            const blob = new Blob([scriptContent], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = `${currentProjectInfo.full_name.replace('/', '-')}-structure.sh`;
            link.href = url;
            link.click();
            URL.revokeObjectURL(url);
        });
        
        document.getElementById('downloadCardBtn').addEventListener('click', async () => {
            if (!currentProjectInfo) return;
            try {
                const cardElement = document.querySelector('#shareCardContainer > div');
                const canvas = await html2canvas(cardElement, {
                    backgroundColor: null,
                    scale: 2
                });
                const link = document.createElement('a');
                link.download = `${currentProjectInfo.full_name.replace('/', '-')}-card.png`;
                link.href = canvas.toDataURL('image/png');
                link.click();
            } catch (error) {
                console.error('生成卡片图片失败:', error);
            }
        });
        
        document.getElementById('cardStyleSelect').addEventListener('change', (e) => {
            selectedCardStyle = e.target.value;
            if (currentProjectInfo) {
                const container = document.getElementById('shareCardContainer');
                container.innerHTML = '';
                const card = generateShareCard(currentProjectInfo, selectedCardStyle);
                container.appendChild(card);
            }
        });
        
        document.getElementById('projectInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                document.getElementById('generateDirBtn').click();
            }
        });
        
        document.querySelector('details').addEventListener('toggle', function() {
            const icon = this.querySelector('i.fa-chevron-down');
            if (this.open) {
                icon.style.transform = 'rotate(180deg)';
            } else {
                icon.style.transform = 'rotate(0deg)';
            }
        });
        
        const modal = document.getElementById('helpModal');
        const helpBtn = document.getElementById('helpBtn');
        const closeBtn = document.querySelector('.close');
        
        helpBtn.addEventListener('click', () => {
            modal.style.display = 'block';
        });
        
        closeBtn.addEventListener('click', () => {
            modal.style.display = 'none';
        });
        
        window.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.style.display = 'none';
            }
        });
    </script>
</body>
</html>